<template>
	<view>
		<image src="/static/user/imgtequan.jpg" mode="widthFix" class="head_image"></image>
		<dsl-navbar title="" bgTopImg="" textTitle="#D6A779" backBg="#D6A779" isBack=""></dsl-navbar>

		<view class="flex flex-wrap text-center " :style="{'margin-top':-CustomBar+'px'}">
			<view v-for="(item,index) in classifys" :key="item.id" style="width: 50%;" class="margin-top">
				<image :src="item.icon" mode="" class="classify_icon"></image>
				<view class="classify_title">{{item.title}}</view>
				<view class="classify_content margin-top-xs">{{item.content}}</view>
			</view>
		</view>
		<view style="height: 1rpx; background-color:#707070 ;" class="margin-tb"></view>
		<view style="color: #D6A779;" class="margin">选择VIP套超</view>

		<view class="flex justify-between padding">
			<view class="vip_body" v-for="(item,index) in vipList" :class="{'active_vip':index == vipNum}" @click="vipNum =index">
				<view>{{item.title}}</view>
				<view class="vip_pay" :class="{'active_pay':index == vipNum}">￥{{item.pay}}</view>
				<view style="text-decoration:line-through">￥{{item.throughPay}}</view>
			</view>
		</view>
		<button>立即开通</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				classifys: [{
						title: '尊享会员身份标识',
						icon: '/static/user/modules/imgbiaoshi-1.png',
						content: '会员身份角标，专属身份标识',
						url: '',
						id: '1231231'
					},
					{
						title: '好友数量上线增至1000人',
						icon: '/static/user/modules/imgshuliang.png',
						content: '意向好友想加就加',
						url: '',
						id: '1231231dsgs'
					},
					{
						title: '优先推送',
						icon: '/static/user/modules/imgtuisong.png',
						content: '优先将男用户资源推送给女主播',
						url: '',
						id: '1231231qeqweq'
					},
					{
						title: '免费和他视频',
						icon: '/static/user/modules/imgshipin-2.png',
						content: '免费和心仪的男生视频聊天',
						url: '',
						id: '123123112312311231231aseq'
					},
				],
				vipList: [{
						title: '1个月',
						pay: '99',
						throughPay: '222'
					},
					{
						title: '1个月',
						pay: '99',
						throughPay: '222'
					},
					{
						title: '1个月',
						pay: '99',
						throughPay: '222'
					}
				],
				vipNum:0,//默认选中0
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {},
		methods: {},
		computed: {},
		components: {}
	}
</script>

<style lang="scss">
	.head_image {
		width: 750rpx;
		height: 400rpx;
	}

	.classify_icon {
		width: 98rpx;
		height: 98rpx;
		background: linear-gradient(180deg, #EED8BD 0%, #B48B5F 100%);
		border-radius: 50%;
		opacity: 1;
	}

	.classify_title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #D6A779;
		opacity: 1;
	}

	.classify_content {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #888888;
		opacity: 1;
	}

	page {
		background-color: #202028;
	}

	// 套餐
	.vip_body {
		color: #E5C19F;
		width: 210rpx;
		height: 250rpx;
		border: 2rpx solid #D6A779;
		opacity: 1;
		border-radius: 20rpx;
		text-align: center;
		line-height: 80rpx;

		.vip_pay {
			font-size: 50rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #E5C19F;
			opacity: 1;
		}
		
	}
	.active_vip{
		background: #A78E79 !important;
		color: #FFE6CD !important;
	}
	.active_pay{
		color: #FFE6CD !important;
	}
	button{
		width: 600rpx;
		height: 90rpx;
		background: linear-gradient(180deg, #EED8BD 0%, #B48B5F 100%);
		box-shadow: 0px 0px 20rpx rgba(153, 153, 153, 0.2);
		opacity: 1;
		border-radius: 55rpx;
		color: white;
		margin-bottom: 50rpx;
	}
</style>
